<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model='msg'>
        <!-- <p>计算属性:{{listenMsg}}</p> -->
    </div>
</body>

</html>
<script>
    // 计算属性和watch的区别:
    // 01: 计算属性初始化执行, watch 初始化默认不执行, 要想初始执行, 需要设置immediate:true
    // 02: 计算属性必须有return 返回值, 而watch 没有返回值
    // 03: 计算属性可以实现监听引用数据或深层数据结构, 而监听器需要设置deep :true 深度监听才行
    // 04: 计算属性一般进行一些比较轻量级的计算, 不会进行开销比较大的异步等等操作, 而watch可以监听
    // 当数据发生变化值, 执行开销比较大的异步操作
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                msg: '周星驰'

            }
        },
        computed: {
            // listenMsg() {
            //     console.log('计算属性', 'msg被修改了');
            //     // 根据 依赖的值的变化 this.msg 的变化, 执行一些操作
            //     // 操作....
            //     return this.msg
            // }
        },
        // 定义侦听器
        watch: {
            //  表示要监听msg数据的变化
            msg1(newvalue, oldvalue) {
                // console.log(this.msg);
                // console.log('watch', 'msg 被修改了');
                // 参数1newvalue:  表示变化后的值
                // 参数2:oldvalue: 表示变化前的值
                console.log(newvalue, oldvalue)
            }
        }

    }).mount('#app') 
</script>